@font-face {
  font-family: "zabras";
  src: url("assets/fonts/zabars/ZABARS/Zabars.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
  font-family: "komika";
  src: url("assets/fonts/komika.hand-bold.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("assets/background-image.jpg"), linear-gradient(to bottom, rgba(230, 130, 72, 0.5), rgba(77, 171, 101, 0.5));
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-clip: border-box;
  background-size: cover;
}
html {
  overflow: hidden;
}
canvas {
  position: relative;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  background-image: url("assets/background-image.jpg"), linear-gradient(to bottom, rgba(230, 130, 72, 0.5), rgba(77, 171, 101, 0.5));
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-clip: border-box;
  background-size: cover;
  display: block;
}

h1 {
  font-family: "zabras", system-ui, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 7vw;
  letter-spacing: 0.25rem;
  text-transform: capitalize;
  margin-block-start: 0;
  margin-block-end: 0;
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 4px 20px 2px 0 rgba(0, 0, 0, 0.5);
}
.help-btn,
.help-btn-1 {
  font-family: "komika", system-ui, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
  min-height: 47.5px;
  min-width: 47.5px;
  letter-spacing: 0.25rem;
  position: absolute;
  top: 2vw;

  background-color: goldenrod;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid;
  cursor: pointer;
  transition: background-color, transform 400ms ease-in-out;
}
.help-btn:hover,
.help-btn-1:hover {
  background-color: rgb(218, 158, 78);
  transform: scale(1.05);
}

.help-btn-1 {
  left: 2vw;
}
.help-btn {
  left: 9vw;
}
.d-none {
  display: none;
}

.btn {
  cursor: pointer;
}

.btn-play {
  position: absolute;
  top: 2vw;
  background: gold;
  padding-inline: 1vw;
  padding-block: 0.2vw;
  min-height: 46.2px;
  min-width: 156.5px;
  border-radius: 40rem;
  border: 4px solid;
  font-family: "komika", system-ui;
  font-size: 2vw;
  font-weight: 800;
  transition: background-color 300ms ease-in-out;
}
.btn-play:hover {
  background-color: rgb(169, 126, 17);
}

.btn-try-again {
  z-index: 2;
}
.btn-secondary {
  height: 5vw;
  width: 5vw;
  border-radius: 50%;
  background: transparent;
  border: 2px solid;
}
.btn-volume {
  position: absolute;
  height: 5vw;
  width: 5vw;
  max-width: 50px;
  max-height: 50px;
  border-radius: 50%;
  background: transparent;
  right: 2vw;
  bottom: 1vw;
  border: 2px solid;
}
.btn-third {
  height: 4vw;
  width: 4vw;
  border-radius: 50%;
  background: transparent;
  border: 2px solid;
}
.btn-third-fi {
  height: 4vw;
  width: 8vw;
  border-radius: 50%;
  background: transparent;
  border: 2px solid;
}
.btn-fullscreen {
  position: absolute;
  height: 6vw;
  width: 6vw;
  max-width: 50px;
  max-height: 50px;
  background: transparent;
  top: 0;
  right: 0;
  border: 2px solid;
}
.btn-mobile-play {
  position: absolute;
  display: flex;
  gap: 2rem;
  bottom: 1vw;
}

.btn-full-rect {
  height: 4vw;
  width: 14vw;
  background: transparent;
  border: 2px solid;
}
.btn-fi {
  cursor: pointer;
}
.btn-left {
  right: 63vw;
}
.btn-right {
  right: 30vw;
}
.btn-rotate {
  right: 25vw;
}
.btn-up {
  right: 40.5vw;
}
.btn-throw {
  right: 51vw;
}
.startscreen {
  max-height: 480px;
  object-fit: cover;
  max-width: 720px;
}
.how-to-play div {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.btn-close {
  position: absolute;
  top: 2vw;
  right: 1vw;
  border: transparent;
}

.btn-close img {
  width: 2rem;
}

h2 {
  margin-block-start: 0;
  margin-block-end: 0;
  text-align: center;
  margin-bottom: 2.5rem;
  text-transform: capitalize;
  font-size: 25px;
}
p {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-bottom: 1rem;
}

main {
  position: relative;
  border: 12px solid rgba(255, 255, 255, 0.8);
  width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.full-canvas {
  width: 100%;
  max-height: 480px;
  overflow-y: auto;
  font-size: 22px;
  font-family: system-ui;
  padding-inline: 1rem;
  padding-block: 0.5rem;
  margin-bottom: 3.5rem;
  box-sizing: border-box;
}
.full-canvas::-webkit-scrollbar {
  opacity: 0;
}

.big-letter {
  font-size: 40px;
  font-weight: bold;
}
.game-over {
  position: absolute;
  height: 480px;
  max-width: 720px;
}
.turn-screen {
  background-color: black;
  height: 100%;
  width: 100%;
  max-height: 480px;
  padding-block: 6vw;
}
.mobile {
  width: 27vw;
  height: 37vw;
  margin: 0 auto;
  display: block;
  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(208deg) brightness(102%) contrast(102%);
  animation-name: rotateMobile;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.btn-play {
  animation-name: animatePlayBtn;
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes rotateMobile {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes animatePlayBtn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

@media only screen and (max-width: 1450px) {
  .help-btn {
    left: 2vw;
    top: 2vw;
  }
  .help-btn-1 {
    left: 11vw;
    top: 2vw;
  }
}

@media only screen and (max-width: 720px) {
  main,
  canvas,
  .startscreen,
  .game-over,
  .turn-screen {
    width: 100%;
  }
}

@media only screen and (max-height: 480px) {
  main,
  canvas,
  .startscreen,
  .game-over,
  .turn-screen {
    height: 100vh;
    width: 100vw;
    max-width: unset;
  }
}

@media screen and (orientation: portrait) {
  .turn-screen {
    display: block;
  }
  .btn-play,
  .canvas,
  .game-over,
  .btn-volume,
  .startscreen,
  .help-resp,
  .info-resp,
  .full-canvas {
    display: none;
  }
  .btn-left,
  .btn-right,
  .btn-up,
  .btn-throw {
    display: none !important;
  }
  main {
    width: 100% !important;
  }
}